define(function(require, exports, module) {
  var Backbone = require('backbone');
  var $ = require('jquery');
  var _ = require('underscore');
  var jsonview = require('jsonview');

  var drag = require('hy5b/frontend/drag/index');
  require('css!hy5b/frontend/drag/drag.css');

  function app() {
    var echarts = require('npm/echarts/dist/echarts');
    var chinaJson = require('json!npm/echarts/map/json/china.json');
    echarts.registerMap('china', chinaJson);
    
    var option = require('v/graph/option/geo');

    var beijingMove = require('v/graph/mix/beijingMove');
    var pm25 = require('v/graph/mix/pm25');
    var bar = require('v/graph/option/bar');
    var radar = require('v/graph/option/radar');
    var line = require('v/graph/option/line');

    var barLine = require('v/graph/option/bar-line');

    var $div = $('<div>').css({
      'background-color': '#2f559c'
      // 'transform': 'scale(2, 2)'
    }).width(180).height(160);

    $('#main').html($div);

    var $chart = $('<div id="chart">').width('100%').height('100%');

    $div.html($chart);

    var chart = echarts.init($chart[0]);

    function resize() {
      radar.radar[0].splitNumber = 3
      chart.setOption(radar, true)
        // chart.resize()
    }

    var fontSize = bar.legend.textStyle.fontSize;
    var fontCount = 0;
    _.map(bar.legend.data, function(item) {
      fontCount = Math.max(item.name.length, fontCount);
    })

    var width = fontCount * fontSize + 35 + 10;
    var show = bar.legend.show;

    bar.grid.left = width;
    chart.setOption(line);

    // var canvas = $chart.find('canvas')[0];
    // var ctx = canvas.getContext("2d");

    // ctx.setTransform(2,0,0,2,0,0);

    // chart.setOption(line);
    drag($div[0], dragCall);

    function dragCall() {
      chart.resize()
    }
  }

  return app;
});